<template>
	<custom-page title="查找助教" borderBottomColor="transparent" backgroundColor="#F9F9F9">
		<template #page>
			<view class="page-content">
				<view class="search-layout">
					<view class="input-row">
						<image class="search-img" :src="asserts.ic_search"></image>
						<input class="input-content" placeholder="请输入助教名称查找" v-model="name"/>
						<view class="btn-search" @click="searchClick">搜索</view>
					</view>
				</view>
				<view class="filter-layout">
					<view class="filter-item" :class="((leaveIndex == -1) && (stateIndex == -1))?'col-01c':'col-021'" @click="selectAllClick">全部</view>
					<picker @change="leveSelectChange" :range="(leaveListData.map((e) => e.grade))" mode="selector" class="filter-item">
						<view class="filter-item">
							<view :class="(leaveIndex != -1)?'col-01c':'col-021'">{{(leaveIndex!=-1)?leaveListData[leaveIndex].grade:'助教等级'}}</view>
							<image :src="asserts.ic_triangle"></image>
						</view>
					</picker>
					<picker @change="stateSelectChange" :range="(stateListaData.map((e) => e.enumDesc))" mode="selector" class="filter-item">
						<view class="filter-item">
							<view :class="(stateIndex != -1)?'col-01c':'col-021'">{{(stateIndex!=-1)?stateListaData[stateIndex].enumDesc:'接单状态'}}</view>
							<image :src="asserts.ic_triangle"></image>
						</view>
					</picker>
				</view>
				<common-list-view ref="assistantList" class="list-view" :enableLoadMore="true" :enableRefresh="true"
					@listinit="onListInit($event)" :hasNoDataHolder="true">
					<template #content='{datas}'>
						<assistant-list-item v-for="(item, index) in datas" :itemData="item" @itemClick="assistantClick(item)"></assistant-list-item>
					</template>
				</common-list-view>
			</view>
		</template>
	</custom-page>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				leaveListData: [],
				leaveIndex: -1,
				gradeId: '',
				stateListaData: [],
				stateIndex: -1,
				orderReceivingState: '',
			}
		},
		computed: {
			getGradeId(){
				if(this.leaveListData && this.leaveListData.length>0 && this.leaveIndex != -1){
					return this.leaveListData[this.leaveIndex].id
				}else{
					return ''
				}
			},
			getOrderReceivingState(){
				if(this.stateListaData && this.stateListaData.length>0 && this.stateIndex != -1){
					return this.stateListaData[this.stateIndex].enumCode
				}else{
					return ''
				}
			}
		},
		onLoad(val) {
			this.getGradeList()
			this.getReceivingList()
		},
		methods: {
			//列表加载
			onListInit(event){
				event.target.loadPageData = ({start, pageSize, showLoading = false}) => {
					let params = {
						current: start,
						pageSize: pageSize,
						name: this.name,
						gradeId: this.getGradeId,
						orderReceivingState: this.getOrderReceivingState
					}
					return this.requestCenter.getAssistantPageList(params)
					.then(res => {
						return Promise.resolve({ 
							curPage: start,
							pageCount: res.pages || 1,
							datas: res.records || []
						})
					})
				}
			},
			
			refreshList(){
				this.$refs.assistantList.triggerLoadData({start: 1, showLoading: true})
			},
			
			//助教等级列表
			getGradeList(){
				this.requestCenter.getGradeList().then(res => {
					this.leaveListData = res
				})
			},
			
			//获取接单状态
			getReceivingList(){
				this.requestCenter.getReceivingList().then(res => {
					this.stateListaData = res
				})
			},
			
			//点击搜索
			searchClick(){
				this.refreshList()
			},
			
			//点击全部
			selectAllClick(){
				this.leaveIndex = -1
				this.stateIndex = -1
				this.refreshList()
			},
			
			//助教等级
			leveSelectChange(e){
				let index = e.detail.value
				this.leaveIndex = index
				//this.gradeId = this.leaveListData[this.leaveIndex].id
				this.refreshList()
			},
			
			//接单状态
			stateSelectChange(e){
				let index = e.detail.value
				this.stateIndex = index
				//this.orderReceivingState = this.stateListaData[this.stateIndex].enumCode
				this.refreshList()
			},
			
			//助教点击
			assistantClick(item){
				uni.navigateTo({
					url: `/pages/assistant-detaill/assistant-detaill?userId=${item.userId}`
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page-content{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.list-view{
		flex: 1;
		overflow: hidden;
	}
	.search-layout{
		display: flex;
		flex-direction: row;
		padding: 12rpx 32rpx;
		box-sizing: border-box;
		background-color: white;
		.input-row{
			width: 100%;
			height: 72rpx;
			background: #EEEEEE;
			border-radius: 36rpx 36rpx 36rpx 36rpx;
			border: 2rpx solid #EAEAEA;
			display: flex;
			flex-direction: row;
			align-items: center;
			.search-img{
				width: 32rpx;
				height: 32rpx;
				margin-left: 32rpx;
				margin-right: 16rpx;
			}
			.input-content{
				flex: 1;
				font-size: 28rpx;
				height: 100%;
			}
			.btn-search{
				width: 128rpx;
				height: 72rpx;
				line-height: 72rpx;
				background: #01CBFF;
				border-radius: 36rpx 36rpx 36rpx 36rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}
	}
	.filter-layout{
		display: flex;
		flex-direction: row;
		background-color: white;
		height: 88rpx;
		.filter-item{
			flex: 1;
			font-size: 28rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			image{
				width: 12rpx;
				height: 12rpx;
				margin-top: 12rpx;
				margin-left: 6rpx;
			}
		}
		.col-01c{
			color: #01CBFF;
		}
		.col-021{
			color: #021624;
		}
	}
</style>
